<template>
    <div class="modal-adress" v-if="visible">
        <div class="mask" @click="close()"></div>
        <div class="main">
            <div class="title">
                <Icon type="close-round" @click.native="close"></Icon>
            </div>
            <div class="content">
                <p class="form-title">添加收货地址</p>
                <Form :model="formItem" ref="formValidate" :rules="ruleValidate" :label-width="100">
                    <FormItem label="收货人姓名:" prop="name">
                        <Input v-model="formItem.name" placeholder="请使用真实姓名，不超过八个字"/>
                    </FormItem>
                    <FormItem label="电话:" prop="tel">
                        <Input v-model="formItem.tel" placeholder=""/>
                    </FormItem>
                    <FormItem label="所在地区:" prop="res_s">
                        <al-selector level="2" auto :gutter="0" v-model="formItem.res_s"/>
                    </FormItem>
                    <FormItem label="详细地址:" prop="textarea">
                        <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 3,maxRows: 3}" placeholder="详细地址，长度为5～50字" />
                    </FormItem>
                </Form>
            </div>
            <div class="btn">
                <button class="cancel" @click.stop="cancel">取消</button>
                <button class="determine" @click.stop="determine">确定</button>
            </div>
        </div>
    </div>
</template>
<script>
import { Icon, Form, FormItem, Input, Select, Option } from "iview";
import { addressOperation } from "../http/api";
export default {
    components: {
        Icon,
        Input,
        FormItem,
        Form,
        Select,
        Option
    },
    watch: {

    },
    data() {
        const phone = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请输入联系电话"));
            } else {
                if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(value)) {
                    callback(new Error("手机格式错误"));
                } else {
                    callback();
                }
            }
        };
        return {
            formItem: {
                name: "",
                tel: "",
                res_s: [],
                textarea: "" //详细地址
            },
            ruleValidate: {
                name: [
                    {
                        required: true,
                        message: "请输入收货人姓名",
                        trigger: "blur"
                    },
                    {
                        type: "string",
                        max: 8,
                        message: "不超过8个字",
                        trigger: "blur"
                    }
                ],
                tel: [
                    {
                        validator: phone,
                        trigger: "blur",
                        required: true
                    }
                ],
                res_s: [
                    {
                        required: true,
                        type: "array",
                        message: "请选择收货地址",
                        trigger: "change"
                    }
                ],
                textarea: [
                    {
                        required: true,
                        type: "string",
                        max: 50,
                        min: 5,
                        message: "请输入详情地址,长度为5～50字",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        content: {
            type: String,
            default: "错误信息"
        }
    },
    methods: {
        close() {
            this.$emit("update:visible", false);
        },
        cancel() {
            this.close();
            this.$emit("cancel");
        },
        determine() {
            this.$refs["formValidate"].validate(valid => {
                if (valid) {
                    let params = {
                        operationType: "insert",
                        consignee: this.formItem.name,
                        provinceId: this.formItem.res_s[0].code,
                        cityId: this.formItem.res_s[1].code,
                        countryId: this.formItem.res_s[2].code,
                        address: this.formItem.textarea,
                        mobile: this.formItem.tel
                    };
                    addressOperation(params).then(response => {
                        if (response.data.status == 1000) {
                            this.close();
                            this.$emit("determine");
                        }
                    });
                }
            });
        }
    }
};
</script>
<style lang="less">
.modal-adress {
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 0 5px 0;
    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3);
    }
    .main {
        width: 630px;
        height: 460px;
        background: #fff;
        position: absolute;
        box-sizing: border-box;
        left: 50%;
        top: 50%;
        margin-top: -230px;
        margin-left: -315px;
        .title {
            padding: 15px 15px 0;
            color: #788492;
            overflow: hidden;
            font-size: 14px;
            p {
                float: left;
            }
            i {
                float: right;
                font-size: 16px;
                cursor: pointer;
            }
            i:hover {
                color: #fc6532;
            }
        }
        .content {
            text-align: center;
            font-size: 14px;
            color: #788492;
            padding-top: 20px;
            padding-left: 60px;
            padding-right: 80px;
            .form-title {
                font-size: 18px;
                color: #364049;
                margin-bottom: 20px;
            }
            form {
                font-size: 14px;
                label {
                    color: #788492;
                    font-size: 14px;
                }
            }
        }
        .btn {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            button {
                width: 50%;
                height: 100%;
                border: none;
                outline: none;
                font-size: 14px;
                color: #fff;
            }
            .cancel {
                background: #788492;
                float: left;
            }
            .determine {
                float: right;
                background: #49cbcd;
            }
        }
        .ivu-col-span-8 {
            box-sizing: border-box;
            padding: 0 2px;
        }
    }
}
</style>

